<template>
  <div class="order-filter">
    <el-form :inline="true" :model="queryForm" class="query-form">
      <el-form-item style="margin-right: 0;margin-bottom: 0;">
        <OrderFilter :filter-list="filterList" :is-order-filter="isOrderFilter" :key-option="keyOption" @filterChange="filterChange" @keyup.enter.native="queryClick">
          <el-form-item>
            <el-select
              v-model="formData.orderType"
              size="small"
              placeholder="订单类型"
              class="changeStatus"
              popper-class="global-select-down"
              @change="queryClick">
              <el-option
                v-for="item in orderOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="formData.resourceType"
              size="small"
              placeholder="资源类型"
              class="changeStatus"
              popper-class="global-select-down"
              @change="queryClick">
              <el-option
                v-for="item in resourceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="isCostWriteShow">
            <el-select v-model="formData.costWrite" size="small" placeholder="成本填写" class="changeStatus" popper-class="global-select-down" @change="queryClick">
              <el-option
                v-for="item in costWriteOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="isCostConfirmShow">
            <el-select v-model="formData.costConfirm" size="small" placeholder="成本确认" class="changeStatus" popper-class="global-select-down" @change="queryClick">
              <el-option
                v-for="item in costConfirmOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="!isAccountStateHide">
            <el-select v-model="formData.accountState" popper-class="global-select-down" size="small" placeholder="核销状态" class="changeStatus" @change="queryClick">
              <el-option
                v-for="item in verificationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.incomeType" size="small" placeholder="收入类型" class="changeStatus" popper-class="global-select-down" @change="queryClick">
              <el-option
                :value="0"
                label="全部" />
              <el-option
                v-for="item in incomeOption"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="!isSealBillTypeHide">
            <el-select v-model="formData.sealBillType" size="small" placeholder="封账状态" class="changeStatus" popper-class="global-select-down" @change="queryClick">
              <el-option
                v-for="item in sealBillOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.reviewStateFilter" size="small" placeholder="审批状态" class="changeStatus" popper-class="global-select-down" @change="queryClick">
              <el-option
                v-for="item in reviewStateOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="time-type-select">
            <el-select v-model="formData.timeType" size="small" placeholder="时间类型" popper-class="global-select-down" class="changeStatus">
              <el-option
                v-for="item in orderTimetypes"
                :key="item.type"
                :label="item.name"
                :value="item.type" />
            </el-select>
            <el-date-picker
              v-model="formData.dateTime"
              :unlink-panels="true"
              :clearable="true"
              :editable="false"
              align="center"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              format="yyyy/MM/dd"
              size="small"
              @change="datePickerTime" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model.trim="formData.currentMonth" true-label="0" false-label="-1" @change="queryClick">只看本月</el-checkbox>
          </el-form-item>
          <el-form-item>
            <div class="query-button">
              <el-button class="search-btn-style" plain type="primary" size="small" @click="queryClick">查询</el-button>
              <!-- <el-button class="cancel-btn-style" type="info" size="small" @click="queryEmpty">清空</el-button> -->
              <el-button class="clear-btn-style" type="text" size="small" @click="queryEmpty">
                清空
                <img src="../../../assets/medium/clear.png" class="clear-icon" alt="clear">
              </el-button>
            </div>
          </el-form-item>
        </OrderFilter>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SelectOption from '../mixins/selectOption';
import DatePicker from '@/mixins/datePicker';
import { orderTimetypes } from '@/utils/typeCfg.js';
import OrderFilter from '@/components/Common/FilterInput';
import { getIncomeType } from '@/api/select';

export default {
  name: 'FilterData',
  components: { OrderFilter },
  mixins: [SelectOption, DatePicker],
  props: {
    isDustbin: {
      type: Boolean,
      default: false
    },
    queryForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tabActiveId: {
      type: String | Number,
      default: ''
    },
    tabList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      isShow: false,
      filterList: [{
        listContent: '',
        listKey: 'orderId'
      }],
      filterListGroup: {},
      isOrderFilter: true,
      incomeOption: [],
      costWriteOption: [
        { value: -1, label: '所有' },
        { value: 1, label: '已填写' },
        { value: 2, label: '未填写' }
      ],
      costConfirmOption: [
        { value: -1, label: '全部' },
        { value: 1, label: '已确认' },
        { value: 0, label: '未确认' }
      ]
    };
  },
  computed: {
    isAccountStateHide() {
      const accountStateId = this.tabList.find(i => i.name === '待核销');
      return accountStateId ? this.tabActiveId === accountStateId.id : false;
    },
    isSealBillTypeHide() {
      const accountStateId = this.tabList.find(i => i.name === '待封账');
      return accountStateId ? this.tabActiveId === accountStateId.id : false;
    },
    isCostWriteShow() {
      const accountStateId = this.tabList.find(i => i.name === '待审批');
      return accountStateId ? this.tabActiveId === accountStateId.id : false;
    },
    isCostConfirmShow() {
      const accountStateId = this.tabList.find(i => i.name === '待核算');
      return accountStateId ? this.tabActiveId === accountStateId.id : false;
    },
    formData() {
      return this.queryForm;
    },
    orderTimetypes() {
      let arr = JSON.parse(JSON.stringify(orderTimetypes));
      if (this.isDustbin) {
        arr.push({ type: 2, name: '删除时间' });
      } else {
        arr = arr.filter(i => i.type !== 2);
      }
      return arr;
    }
  },
  activated() {
    this.incomeTypeList();
  },
  methods: {
    initData() {
      this.filterList = [{
        listContent: '',
        listKey: 'orderId'
      }];
    },
    // 获取收入类型的列表
    async incomeTypeList() {
      try {
        const result = await getIncomeType();
        this.incomeOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    showBtn() {
      this.isShow = !this.isShow;
    },
    filterChange(val) {
      this.filterListGroup = val;
    },
    queryClick() {
      const formData = {
        ...this.formData,
        ...this.filterListGroup
      };
      if (this.formData.dateTime) {
        this.createStart = Math.round(this.formData.dateTime[0] / 1000);
        this.createEnd = Math.round(this.formData.dateTime[1] / 1000);
      }
      this.$emit('toSearch', formData, this.createStart, this.createEnd);
    },
    queryEmpty() {
      this.filterList = [{
        listContent: '',
        listKey: 'orderId'
      }];
      this.filterListGroup = {};
      this.$emit('toClear', this.formData, this.createStart, this.createEnd);
    }
  }
};
</script>
<style lang="scss" scoped>
.order-filter {
  .query-button {
    // height: 53px;
    // display: flex;
    // align-items: center;
  }
  .query-form {
    & ::v-deep {
      .el-form-item {
        margin-right: 14px;
        margin-bottom: 24px;
      }
    }
    .time-type-select {
      & ::v-deep {
        .el-form-item__content {
          display: flex;
          align-items: center;
        }
        .el-select {
          width: 100px;
          .el-input__inner {
            width: 105px !important;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: none;
            border-color: #DCDFE6 !important;
          }
        }
        .el-date-editor {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-color: #DCDFE6 !important;
        }
      }
    }
    .filter-expand {
      margin: 0 50px 0 10px;
      padding-top: 10px;
      color: #333333;
      font-size: 14px;
      cursor: pointer;
      .el-icon-arrow-down {
        transition: all 0.3s;
        &.open {
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
